﻿@model Siser.Web.Models.UsuarioEquipo

@{
    ViewBag.Title = "Asociación Usuarios-Equipos";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@*Validación de usuario, para que no se pueda acceder a la página sin estar logueado *@
@if (@User.Identity.Name == "")
{
    Layout = null;
    <div style="width:800px; font-size:2em; height:500px; text-align:center; margin-top:100px" class="division">
    @Html.ActionLink("Ingrese como usuario válido...", "InicioSesion", "Cuenta")
    </div>
}
else
{
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#UsuarioId").change(function () {
            obtenerEquiposAsociadosByIdUsuario();
        });

        //Evento que controla la carga de un nuevo equipo asociado al usuario seleccionado
        $("#bAgregar").click(function () {
            $('#Equipo :selected').each(function (i, valorSeleccionado) {
                if ($(valorSeleccionado).val() != 0) {
                    $('#EquipoSolicitado').append('<option value="' + $(valorSeleccionado).val() + '">' + $(valorSeleccionado).text() + '</option>');
                    $(valorSeleccionado).remove();
                    saveUsuarioEquipo($(valorSeleccionado).val(), $('#UsuarioId').val());
                }
            });
        });

        //Evento que controla la eliminación del equipo asociado al usuario
        $("#bQuitar").click(function () {
            $('#EquipoSolicitado :selected').each(function (i, valorSeleccionado) {
                if ($(valorSeleccionado).val() != 0) {
                    $(valorSeleccionado).remove();
                    $('#Equipo').append('<option value="' + $(valorSeleccionado).val() + '">' + $(valorSeleccionado).text() + '</option>');

                    obtenerEquiposSinSolicitar();
                    deleteUsuarioEquipoByIdEquipoAndIdUsuario($(valorSeleccionado).val(), $('#UsuarioId').val());
                }
            });
        });
    });

    function obtenerEquiposAsociadosByIdUsuario() {
        $.ajax({
            type: "Post",
            async: true,
            datatype: "json",
            url: "listarEquiposAsociados?idUsuario=" + $('#UsuarioId').val(),
            success: function (data) {
                $("#EquipoSolicitado").empty();
                if (jQuery.isEmptyObject(data.Result)) {
                    $('#EquipoSolicitado').append('<option value="0">Sin equipos asociados...</option>');
                }
                else {
                    $.each(data.Result, function (i, valor) {
                        $('#EquipoSolicitado').append('<option value="' + valor['Id'] + '">' + valor['Nombre'] + '</option>');
                    });
                }
                obtenerEquiposSinSolicitar();
            }
        });
    }

    function saveUsuarioEquipo(idEquipo, idUsuario) {
        $.ajax({
            type: "Post",
            async: true,
            datatype: "json",
            url: "saveUsuarioEquipo?idEquipo=" + idEquipo + "&usuarioId=" + idUsuario,
            success: function (data) {
                obtenerEquiposAsociadosByIdUsuario();
                obtenerEquiposSinSolicitar();
            }
        });
    }

    function deleteUsuarioEquipoByIdEquipoAndIdUsuario(idEquipo, idUsuario) {
        $.ajax({
            type: "Post",
            async: true,
            datatype: "json",
            url: "deleteUsuarioEquipo?idEquipo=" + idEquipo + "&usuarioId=" + idUsuario,
            success: function (data) {
                obtenerEquiposAsociadosByIdUsuario();
                obtenerEquiposSinSolicitar();
            }
        });
    }

    function obtenerEquiposSinSolicitar() {
        $.ajax({
            type: "Post",
            async: true,
            datatype: "json",
            url: "listarEquiposSinAsociar?idUsuario=" + $('#UsuarioId').val(),
            success: function (data) {
                $("#Equipo").empty();
                if (!jQuery.isEmptyObject(data.Result)) 
                {
                    $.each(data.Result, function (i, valor) 
                    {
                        $('#Equipo').append('<option value="' + valor['Id'] + '">' + valor['Nombre'] + '</option>');
                    });
                }
                else {
                    $('#Equipo').append('<option value="0">Todos los equipos asociados...</option>');
                }
            }
        });
    }
</script>
  
<div style="height:50px">&nbsp</div>
<fieldset>
        <legend>Asociar usuario-equipo</legend>
        <div>&nbsp</div>
        <div class="editor-label">
            @Html.LabelFor(model => model.UsuarioId, "Usuario")
        </div>
        
        <div class="editor-field">
            @Html.DropDownList("UsuarioId", String.Empty)
            @Html.ValidationMessageFor(model => model.UsuarioId)
        </div>
        <div>&nbsp</div>
        <div id="caja1">
            @Html.Label("Equipo a Solicitar")
            @Html.ListBox("Equipo", ViewData["ListEquipos"] as MultiSelectList, new { @class = "Equipo" })
        </div>
        
        <div id="caja2">
            <br />   <br />   <br />   <br /> 
                    
            <button id="bAgregar" class="boton">>></button><br />   <br />    
            <button id="bQuitar" class="boton"><<</button><br />    
        </div>
        
        <div id="caja3">
            @Html.Label("Equipo Solicitado")
            @Html.ListBox("EquipoSolicitado", ViewData["ListequipoAsignado"] as MultiSelectList, new { @class = "EquipoSolicitado" }) 
        </div>
          
    </fieldset>

<div class="division">
    @Html.ActionLink("Volver", "Index", "Home")
</div>
</body>
</html>
}